¿Recuerdan la galería Fancy Thumbnail? fue una idea de SOHTANAKA a la que decidí hacer unos cambios porque era necesario disponer de un generoso espacio para mostrarla.
En Dynamic Drive tenemos la solución para conseguir el mismo efecto con CSS, lo podemos conseguir con cualquier cantidad de imágenes y unos simples pasos.
¿Inconvenientes? Sólo se visualiza en Chrome, Safari 4+, Opera 9.5+ y FF 3.6
En plantilla Edición de HTML justo después de ]]></b:skin>

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

Entrada o gadget de HTML que vamos a mostrar las imágenes.

<div class="hovergallery">
<img src="url-imagen-1"/>
<img src="url-ímagen-2"/>
<img src="url-imagen-3"/>
<img src="url-imagen-4"/>
</div>



Adrián J. Messina

Hola Gem@, gracias por compartirlo.
Tenés un excelente gusto por el diseño y estos efectos. Me gustan en su mayoría.

Responder
MexaaC

WOOOOOW!!!! jeje genial!!

Responder
Unknown

Excelente! genial! muy bien 10 felicitado con manzana incluída...ésto le digo al administrador cuando algo me encanta!

Como 'la princesa encantada por el sapito' :P

Responder
Chary Serrano

Me quedo asombrada leyéndote.
Me cuesta trabajillo asimilar muchas de estas cosas, mas que nada por el miedo a meter la pata.

Por cierto, te he dejado un regalito merecido en los premios20blogs

Responder
Gem@

:: Adrián J. Messina agradezco mucho el comentario, es agradable cuando comprobamos que nuestros gustos son compartidos :)

:: Hola Caa!!

:: Qué bien que te gusta Graciela.
No te olvidas el detalle de la manzana, eres un primor ;)

:: Chary Serrano esto es como preparar uno de esos ricos que nos enseñas, requiere unos ingredientes, pochar por aqí, mezclar por allá y ese toque especial que cada uno pone cuando algo le gusta :D
Siempre recomiendo intentar estas cosas en un blog de pruebas, se pierde el miedo y al final termina gustando.
Gracias de corazón por el regalito, se agradece enormemente ;)

Responder
La Trucoteca

¡Qué maravilla!
La verdad es que se trata un efecto muy elegante para las imágenes de un blog, queda genial :)

¡Un saludo!

Responder
Gem@

:: Un saludo La Trucoteca gracias por el comentario :)

Responder
Talismán Dreams

Muchisimas gracias por todo el conocimiento que compartes! Encontre tu blog buscando algun accesorio para animar mi blog y llevo aqui 2 horas!!! jajaja madremia mañana continuare,porque me encanta descubrir cositas nuevas.Un Saludo!!

Responder
Gem@

:: Me alegra que así sea Talisman, puedes quedarte cuanto tiempo quieras aquí estamos las 24 horas. Bueno, de vez en cuando también dormimos :D

Responder
PIRATA63

Hola sigo tu blog y con tu permiso cojo algunas cosas para el mio, gracias

pirata63

Responder
Anónimo

Hola, interesante aplicación, esta y otras que he visto por aquí, sigue trabajando que nos ayudas mucho.

Gracias.

Responder
Gem@

:: Estás en tu casa pirata63.luis :)

:: Gracias por el comentario 1001ideascontracrisis :)

Responder
MexaaC

Lo implementé en mi blog y va genial :D GRACIAS GEM@
Incluso le puedes modificar el tamaño de la img, etc jeje

Responder
Gem@

:: Así es Caa, pero hay que cuidar que al ampliar la imagen el espacio que ocupa no sea mayor que el disponible para el contenido.

Responder
José Romero

Hola Gemma, lo estoy probando en mi blog, pero al meterle un enlace a cada imagen no funcionan los links, ¿sabes a que se deben?

saludos

Responder
Gem@

:: Tendría que ver ese ejemplo J Manuel.

Responder
José Romero

Este seria el código Gem@

<div class="hovergallery">

<img href="http://www.cuentemelo.net/2009/04/arkanoid.html" src="http://img697.imageshack.us/img697/4549/arkanoidx.gif" /> <img href="http://www.cuentemelo.net/2008/07/armycopter.html" src="http://img198.imageshack.us/img198/2382/armyk.gif" />

</div>

Responder
José Romero

Hola de nuevo gem@ aquí te dejo el código

<div class="hovergallery">

<img href="http://www.cuentemelo.net/2009/04/arkanoid.html" src="http://img697.imageshack.us/img697/4549/arkanoidx.gif" /> <img href="http://www.cuentemelo.net/2008/07/armycopter.html" src="http://img198.imageshack.us/img198/2382/armyk.gif" />

</div>

a ver si sabes que le pasa. gracias.

Responder
Gem@

:: Prueba de este modo JManuel:
<a href="url-de-la-página"><img src="url-imagen-1"/>
</a>

Responder
José Romero

De esta forma si me va. Muchas gracias Gema =)

Responder
Gem@

:: Estupendo JManuel :D

Responder
rescatero89

Hola Gem@,

He usado esta galería y tengo un pequeño problema que no se si será normal. Cuando hay dos imágenes de distinto tamaño en la misma línea, una de ellas se baja o se sube un poco con respecto a la otra. Tiene alguna solución para que queden alineadas abajo en cada linea. Gracias. Un ejemplo:

http://bandarescatelinares.blogspot.com/2008/08/fotos-jueves-santo-2009.html

Un saludo.

Responder
Gem@

:: Rescatero las imágenes deberían quedar en la misma línea, es más en el mismo ejemplo que muestras hay dos imágenes al comienzo y son de distinto tamaño que quedan en la misma línea, mira si las dos quedan una a continuación de otra.

Responder
Tutorialesblophome

Hola Gema, he sido incapaz de encontrar el tema en el cual te pregunté sobre una serie de fotografías que pasen de izquierda a derecha como una especie de presentación. Se que algo así no es dificil y que existe, me gustaría saber como hacerlo, te vuelvo a dejar mi página para que le eches un ojo y entiendas lo que quiero (la presentación sería central, donde está la fotografía, busco una página de fotografía sencilla pero curiosa).

www.almartfotografia.blogspot.com

Gracias de nuevo, un saludo.

Responder
Gem@

:: Jonatan te dejé un enlace respondiendo a tu pregunta, era este:
http://vagabundia.blogspot.com/2007/03/desplazamientos-de-textos-marquee.html
Auqnue la entrada trate de desplazamiento de textos, es válida también para imágenes.

Responder
Unknown

Julia buen día :)

La incorporé, las imágenes quedan una debajo de la otra, por qué será?

Besitos!

Responder
Gem@

:: Hola Graciela :)
Puede que la imagen sea demasiado grande y por eso se desplaza a la línea siguiente ¿dónde lo tienes añadido ?

Responder
Unknown

He ido bajando los píxeles de las fotografías y nada...es un blog para una amiga artesana jajaja qué atrevimiento! ahí lo puse para que lo puedas mirar
http://lunitaymiel.blogspot.com/

Besitos :D

Responder
Gem@

:: Graciela, hay saltos de línea entre las imágenes eso hace que bajen a la línea siguiente, prueba en edición de html a poner todo en la misma línea aunque lógicamente llegue a un punto que pase a la siguiente pero deja sólo entre un código de imagen y otro una separación ;)

Responder
Unknown

Ya está, no se me ocurrió probar así.
Muy agradecida amiga, que tengas un bonito domingo y mejor semana, gracias! :D

Responder
sergio

:D Gracias :D Sos genial. Muy amable por compartir estos codigos. Casi me vuelvo loco tratando de hacer para mi primera pagina. Soy nuevo en diseño web. Dios te bendiga

Gem@

Gracias a ti por comentar Sergio :)

Responder
sergio

En "Galería con CSS efecto hover" del 28 sep 2010 como puedo hacer para tener 3 columnas en lugar de 2?

Gem@

La cantidad a mostrar de imágenes será la suma de imágenes que entren en tu sitio es decir, según el espacio disponible así será el número de imágenes.
Si lo que deseas es mostrar un número determinado de imágenes puedes hacerlo añadiendo un ancho al bloque con width de esta forma:
.hovergallery img{
width:500px;
..............
..............
..............
}

500 sería el ancho disponible auqnue puede ser cualquier otro.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top